<template>
  <div class="container">
    <el-row>
      <el-form ref="searchform" :model="form" size="small">
        <el-col :span="3">
          <el-form-item prop="city_id">
            <el-cascader
              style="width: 95%"
              ref="cascader"
              filterable
              v-model="form.city_id"
              :options="cityoptions"
              :props="{
                expandTrigger: 'hover',
                checkStrictly: true,
                emitPath: false,
              }"
              clearable
              :show-all-levels="false"
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="university_id">
            <el-select
              v-model="form.university_id"
              placeholder="请选择高校"
              style="width: 95%"
            >
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="(item, index) in universityOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="keyWord">
            <el-input
              placeholder="请输入关键字"
              clearable
              v-model="form.keyWord"
              style="width: 95%"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <div class="rightbtn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="searchlist"
            class="marginL"
            >查询
          </el-button>
          <el-button icon="el-icon-refresh-left" size="small" @click="resetform"
            >重置</el-button
          >
        </div>
      </el-form>
    </el-row>
    <el-row>
      <el-button
        type="primary"
        size="small"
        @click="addItem"
        v-if="checkPermission(['universityTeamCreate'])"
        >添加</el-button
      >
    </el-row>

    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        size="small"
      >
        <el-table-column
          prop="city_id"
          label="城市"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          prop="university_id"
          label="高校"
          show-overflow-tooltip
        ></el-table-column>

        <el-table-column
          prop="title"
          label="报名点名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="school_name"
          label="驾校名称"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="addr"
          label="机构地址"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="contacts" label="联系人" width="200px">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              placement="top"
              v-if="scope.row.contacts.length > 0"
            >
              <div slot="content">
                　<span v-for="i in scope.row.contacts" :key="i.id"
                  ><span
                    >{{ i.name }}<span>{{ i.tel }}</span></span
                  >
                  <br
                /></span>
              </div>
              <span   style="cursor:pointer;color:#1bbc9b" @click="addContacts(scope.row)"
                >{{ scope.row.contacts[0].name }}
              </span>
            </el-tooltip>
              <span v-else style="cursor:pointer;color:#1bbc9b"  @click="addContacts(scope.row)">-</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lat"
          label="机构纬度"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="lng"
          label="机构经度"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="distance"
          label="与高校距离"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="update_time"
          label="更新时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column prop="date" label="操作" width="160px">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="followBtn(scope.row)"
              v-if="checkPermission(['universityTeamFollowRecord'])"
              >跟进</el-button
            >
            <el-button
              type="text"
              @click="editItem(scope.row)"
              v-if="checkPermission(['universityTeamUpdate'])"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-if="checkPermission(['universityTeamDelete'])"
              @click="deleteTableItem(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20]"
            :page-size="10"
            background
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <!-- 弹框 -->
    <subdialog
      :isshowDialog="isshowDialog"
      :dialogTitle="dialogTitle"
      :formType="formtype"
      @confirm="confirm"
      @closedialog="closedialog"
      :cityoptions="cityoptions"
      :dialogdata="dialogdata"
    ></subdialog>
    <follow
      :isshowDialog="followshow"
      :dialogTitle="followTitle"
      @confirm="followconfirm"
      @closedialog="followclose"
      :dialogdata="followData"
    ></follow>
    <!-- 弹框 -->
    <contactsdialog
      :isshowDialog="CisshowDialog"
      :dialogTitle="CdialogTitle"
      @confirm="Cconfirm"
      @closedialog="Cclosedialog"
      :dialogdata="Cdialogdata"
    ></contactsdialog>
  </div>
</template>

<script type="text/javascript">
import {
  team,
  teamRead,
  teamDelete,
  universityOption,
} from "@/api/schoolResources";
import { commonGetCity } from "@/api/examplace";
import subdialog from "./components/dialog";
import checkPermission from "@/utils/permission"; // 权限判断函数
import topSearch from "@/components/topSearch";
import follow from "../components/follow";
import contactsdialog from "../components/dialog";
export default {
  data() {
    return {
      followshow: false,
      followTitle: "跟进",
      isshowDialog: false,
      dialogTitle: "新增",
      CisshowDialog: false,
      CdialogTitle: "编辑联系人",
      followData: {},
      formtype: 0,
      page: 1,
      rows: 10,
      form: {
        city_id: 2278,
      },
      tableData: [],
      cityoptions: [],
      universityOption: [],
      pagination: {},
      Cdialogdata: {},
      dialogdata: null,
    };
  },
  components: {
    subdialog,
    topSearch,
    follow,
    contactsdialog,
  },
  created() {
    this.getData();
    this.getcommonGetCity();
  },
  methods: {
    checkPermission,
    addContacts(val) {
      this.CisshowDialog = true;
      let params = { objectId: val.id, objectType: 3, contacts: val.contacts };
      this.Cdialogdata = params;
    },
    Cconfirm() {
      this.CisshowDialog = false;
      this.getData();
    },
    Cclosedialog() {
      this.CisshowDialog = false;
    },
    searchlist() {
      (this.page = 1), this.getData();
    },
    resetform() {
      this.getData();
    },
    //跟进
    followBtn(val) {
      this.followshow = true;
      let params = { objectId: val.id, objectType: 3 };
      this.followData = params;
    },
    followconfirm() {
      this.followshow = false;
    },
    followclose() {
      this.followshow = false;
    },
    handleSizeChange(val) {
      this.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    //详情
    async getquestionRead(id) {
      let data = await teamRead({ id: id });
      this.dialogdata = data.data;
    },
    //新增
    addItem() {
      this.isshowDialog = true;
      this.dialogTitle = "新增";
      this.formtype = 0;
    },
    //删除
    async deleteTableItem(val) {
      let data = await teamDelete({ id: val.id });
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    //编辑
    editItem(val) {
      this.isshowDialog = true;
      this.dialogTitle = "编辑";
      this.formtype = 1;
      this.getquestionRead(val.id);
    },
    //城市下拉
    async getcommonGetCity() {
      let data = await commonGetCity();
      this.cityoptions = data.data;
    },
    //提交成功
    confirm() {
      this.isshowDialog = false;
      this.getData();
    },
    closedialog() {
      this.isshowDialog = false;
    },
    //获取选项
    async getuniversityOption(cityId) {
      let data = await universityOption({ city: cityId });
      this.universityOption = data.data;
    },
    //获取列表
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.keyWord) {
        params.keyword = this.form.keyWord;
      }
      if (this.form.city_id) {
        params.city_id = this.form.city_id;
      }
      let data = await team(params);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
  },
  watch: {
    "form.city_id"(val) {
      if (val) {
        this.form.university_id = "";
        this.getuniversityOption(val);
      }
    },
  },
  mounted() {
    this.getuniversityOption(2278);
  },
};
</script>
<style lang="scss">
.contentTips {
  line-height: 2.2;
  .title {
    display: inline-block;
    width: 50px;
  }
  .marginL {
    margin-left: 50px;
  }
  .marginLS {
    margin-left: 10px;
  }
}
</style>
<style lang="scss" scoped>
::v-deep {
  .cell {
    white-space: nowrap;
  }
  .tips {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    white-space: nowrap;
  }
  .marginLS {
    margin-left: 10px;
  }
}
</style>
